import {Row} from 'antd'
import {ReactNode} from 'react'
import {omit} from 'ramda'
import {Col} from '../components'

const Group = ({children, align, spans, justify, gutter, type, width, offsets, textAligns, marginTops, marginBottoms, marginTop, marginBottom, height}) => {

    const childrens = children ? children.length > 1 ? children : [children] : [<div/>]
    return (
        <Row justify={justify || 'center'}
             type={type || 'flex'}
             align={align || 'middle'}
             style={{marginBottom, marginTop, width: width || '100%'}}
             gutter={gutter}
        >
            {(childrens || []).map((child, index) => {
                return (
                    <Col key={index}
                         span={spans ? spans[index] : 0}
                         offset={offsets ? offsets[index] : 0}
                         textAlign={textAligns ? textAligns[index] : 0}
                         marginTop={marginTops ? marginTops[index] : 0}
                         marginBottom={marginBottoms ? marginBottoms[index] : 0}
                         height={height}
                    >
                        {child}
                    </Col>
                )
            })}
        </Row>
    )
}

export default Group